<template>
  <div>
    <premission-view :module="module" :action="['CREATE']" :style="{marginTop: '8px'}">
      <Button type="primary" @click="modal = !modal">新建</Button>
      <Button :style="{marginLeft: '5px'}">导入</Button>
    </premission-view>
    <data-list :columns="columns" :module="module"></data-list>
    <premission-view :module="module" :action="['CREATE', 'UPDATE']">
      <Modal :title="title" v-model="modal" :closable="false" :mask-closable="false" :footer-hide="false" :loading="loading" @on-ok="handleSubmit('form')" @on-visible-change="handleVisibleChange">
        <Form ref="form" :model="formData" :rules="rules" :label-width="80">
          <FormItem label="名称" prop="name">
            <Input v-model="formData.name" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="操作">
            <Select v-model="formData.action">
              <Option value="SEARCH">查询</Option>
              <Option value="CREATE">创建</Option>
              <Option value="UPDATE">更新</Option>
              <Option value="DELETE">删除</Option>
            </Select>
          </FormItem>
          <FormItem label="资源">
            <data-select module="resource" :handleChange="handleChangeResource" :cur="curResource"></data-select>
          </FormItem>
          <FormItem label="排序" prop="num">
            <!-- <Input v-model.number="formData.num"></Input> -->
            <InputNumber :max="99999" :min="0" v-model="formData.num"></InputNumber>
          </FormItem>
          <FormItem label="备注">
            <Input v-model="formData.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
          </FormItem>
        </Form>
      </Modal>
    </premission-view>
  </div>
</template>

<script>
import DataList from '@/components/DataList.vue'
import DataSelect from '@/components/DataSelect.vue'

export default {
  data () {
    return {
      module: 'premission',
      title: '新建',
      formData: {
        name: '',
        action: '',
        num: 0,
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称.', trigger: 'blur' }
        ],
        num: [
          { type: 'number', message: '排序必须为十进制数字', trigger: 'blur' }
        ]
      },
      modal: false,
      loading: false,
      curResource: null,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('PremissionView', {
                props: {
                  module: this.module,
                  action: ['UPDATE']
                }
              }, [h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '编辑')]),
              h('PremissionView', {
                props: {
                  module: this.module,
                  action: ['DELETE']
                }
              }, [h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')])
            ])
          }
        }
      ]
    }
  },
  components: {
    DataList,
    DataSelect
  },
  computed: {
    editNode () {
      return this.$store.state[this.module].editNode
    }
  },
  created () {
    console.log('premissions created')
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const { id, name, action, num, description, self } = this.formData
          if (id) {
            if (name === this.editNode.name && action === this.editNode.action && num === this.editNode.num && description === this.editNode.description) {
              this.$Message.info(`${name}无改动`)
              this.modal = !this.modal
              return
            }
            this.$store.dispatch(`${this.module}/update`, {
              formData: { name, action, num, description, resource: this.curResource },
              self,
              cb: () => {
                this.$Message.success(`修改${name}成功`)
                // this.$store.dispatch(`${this.module}/reLoad`)
              },
              ecb: () => {
                this.$Message.error(`修改${name}失败`)
                // this.$store.dispatch(`${this.module}/reLoad`)
              }
            })
            return
          }
          this.$store.dispatch(`${this.module}/create`, {
            self,
            formData: { name, action, num, description, resource: this.curResource },
            cb: () => {
              this.$Message.success(`添加${name}成功`)
              this.$store.dispatch(`${this.module}/reLoad`)
            },
            ecb: () => {
              this.$Message.error(`添加${name}失败`)
              // this.$store.dispatch(`${this.module}/reLoad`)
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    show (index) {
      this.title = '编辑'
      this.$store.dispatch(`${this.module}/setEditNode`, index)
      this.formData = {
        id: this.editNode.id,
        name: this.editNode.name,
        action: this.editNode.action,
        num: this.editNode.num,
        description: this.editNode.description,
        self: this.editNode._links.self.href
      }
      this.curResource = this.editNode.resource ? this.$mytools.clearUrl(this.editNode.resource._links.self.href) : null
      this.modal = !this.modal
    },
    remove (index) {
      this.$store.dispatch(`${this.module}/setEditNode`, index)
      this.$Modal.confirm({
        title: `确定删除${this.editNode.name}`,
        onOk: () => {
          this.$store.dispatch(`${this.module}/remove`, {
            self: this.editNode._links.self.href,
            cb: result => {
              console.log(result)
              this.$Message.success(`删除${this.editNode.name}成功`)
            },
            ecb: error => {
              console.log(error)
              // this.$Message.error(`删除${this.editNode.name}失败`)
              this.$Message.success(`删除${this.editNode.name}成功`)
            }
          })
        }
      })
    },
    handleChangeResource (value) {
      this.curResource = value
    },
    handleVisibleChange (visible) {
      if (!visible) {
        this.formData = {
          name: '',
          action: '',
          num: 0,
          description: ''
        }
        this.curResource = null
      }
    }
  }
}
</script>

<style>
</style>
